<template>
  <van-nav-bar title="京东商城" />
  <van-swipe :autoplay="3000" lazy-render>
    <van-swipe-item v-for="image in images" :key="image">
      <img width="100%"height="200rem":src="image" />
    </van-swipe-item>
  </van-swipe>
     <van-grid :border="false" :column-num="4">
  <van-grid-item>
    <van-image
      src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
    />
  </van-grid-item>
  <van-grid-item>
    <van-image
      src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
    />
  </van-grid-item>
  <van-grid-item>
    <van-image
      src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg"
    />
  </van-grid-item>
   <van-grid-item>
    <van-image
      src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg"
    />
  </van-grid-item>
</van-grid>
 
</template>  
<script setup>
// 自定义
const images = [
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg",
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg",
];
</script>

<style>
.s1 {
  font-size: 2rem;
}
</style>